<template>
  <div class="show-next-dialog">
    <MyDialog
      :show.sync="visible"
      dialogWidth="1250px"
      @beforeClose="beforeClose">
      <template #body>
        <div class="next-box">
					<div class="pot">
            <div class="pot-info">
              <BoxIconShow :rowInfo="potBoxDetail" />
            </div>
            

            <div class="pot-info">{{ potBoxDetail.rackCode && potBoxDetail.rackCode.code }}</div>


            <div class="pot-info">{{
              commonFun.getLabel(boxStatus, potBoxDetail.boxStatus)
            }}</div>

            <div class="pot-info"> {{
              $moment(potBoxDetail.bindedOn * 1000).format(
                "YYYY-MM-DD HH:mm:ss"
              )
            }}</div>

            <div class="img-box">
              <img
                v-if="potBoxDetail.hasPhoto == 1"
                @click="goBoxDetail(potBoxDetail)"
                src="@/assets/images/form/img.png"
                alt=""
              />
            </div>
          </div>
          <div class="child-box">
            <el-table :data="userBoxListShow" style="width: 100%" height="500" maxHeight="500">
              <el-table-column prop="position" label="位置编号" width="180" align='center'>
                <template slot-scope="scope">
                  {{ scope.row.index }}
                </template>
              </el-table-column>

              <el-table-column prop="boxCode" label="档案窍" width="250" align='center'>
                <template slot-scope="scope">
                  <BoxIconShow :rowInfo="scope.row" />
                </template>
              </el-table-column>

              <el-table-column prop="boxStatus" label="状态" align='center'>
                <template #header>
                  <div class="header-select">
                    <div style="line-height: 40px">状态</div>
                    <el-select
                      v-model="boxStatusHeader"
                      placeholder="状态"
                      size="medium"
                      multiple
                      collapse-tags
                      @change="changeSelect"
                      clearable
                      class="multiple-status">
                      <el-option
                        v-for="item in boxStatusTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </div>
                </template>
                <template slot-scope="scope">
                  <span>{{
                    commonFun.getLabel(boxStatus, scope.row.boxStatus)
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="bindedOn" label="绑定时间" align='center'>
                <template #header>
                  <div class="header-select">
                    <div style="line-height: 40px">绑定时间</div>
                    <el-date-picker
                      @change="changeSelect"
                      v-model="bindedOnHeader"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      size="mini"
                      prefix-icon="el-icon-date">
                    </el-date-picker>
                  </div>
                </template>
                <template slot-scope="scope">
                  <span>{{ scope.row.bindedOn }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="operate" label="操作" align='center'>
                <template slot-scope="scope">
                  <el-button size="mini" @click.native="goBoxDetail(scope.row)"
                    >详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
					<div class="table_bot_line">
						<el-pagination
							v-if="userBoxListShowTotal > 10"
							background
							@size-change="pageSizeChange"
							@current-change="pageCurrentChange"
							:current-page="pageNum"
							:page-sizes="[10, 30, 50, 100, 1000]"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="userBoxListShowTotal"
						></el-pagination>
					</div>
        </div>
      </template>
      <div slot="title">
        <!-- <p>{{ title }}</p> -->
      </div>
      <div slot="footer"></div>
    </MyDialog>
  </div>
</template>

<script>
import {
  boxStatus,
} from "@/utils/dictionary.js";

import {
  getUserBoxSubList,
  getTaglistByUserBoxIds,

  getUserBoxDetail,
  getTaglistByUserBoxId,
} from "@/api/access-manage/index";

import BoxIconShow from "@/components/public-style/BoxIconShow";
export default {
  name: "ShowNextBox",
  components: {
    BoxIconShow,
  },
  props: {
    title: {
      type: String,
      default: "查看档案窍",
    },
    isShowNextBox: {
      type: Boolean,
      default: false,
    },
    showRow: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      boxStatusHeader: [],
      boxStatus: boxStatus,
			bindedOnHeader: [],
      userBoxListShow: [],


			boxStatusTypeList: [
				{ label: "正常存储", value: "2" },
				{ label: "送出库房", value: "3" },
				{ label: "客户签收", value: "4" },
				{ label: "送回库房", value: "5" },
				{ label: "等待回库", value: "6" },
				{ label: "等待对接", value: "7" },
				{ label: "等待出库", value: "8" },
				{ label: "调阅待回库", value: "9" },
				{ label: "调阅待入库", value: "10" },
			],
 
      tableConfig: [
        {
          label: "类别 | 编号",
          prop: "boxCode",
          width: "280",
          selectOption: [
            { label: "云窍 ", value: "2" },
            { label: "档案窍 ", value: "5" },
          ],
        },
        {
          prop: "boxTag",
          label: "标签",
          width: "300",
          showTooltip: false,
        },
        {
          prop: "rackCode",
          label: "货位",
          selectOption: [
            { label: "未绑定货位", value: "0" },
            { label: "已绑定货位", value: "1" },
          ],
        },

        {
          prop: "boxStatus",
          label: "状态",
          selectOption: [
            { label: "正常存储", value: "2" },
            { label: "送出库房", value: "3" },
            { label: "客户签收", value: "4" },
            { label: "送回库房", value: "5" },
            { label: "等待回库", value: "6" },
            { label: "等待对接", value: "7" },
            { label: "等待出库", value: "8" },
            { label: "调阅待回库", value: "9" },
            { label: "调阅待入库", value: "10" },
          ],
        },
        {
          prop: "bindedOn",
          label: "绑定时间",
          selectOption: [],
        },
        {
          prop: "inventoryOn",
          label: "最近盘点时间",
        },
        {
          prop: "hasPhoto",
          label: "",
          width: 38,
        },
        {
          prop: "operate",
          label: "操作",
          width: 100,
        },
      ],
      isLoading: false,
      userBoxListShowTotal: 0,
      pageSize: 10,
      pageNum: 1,


      potBoxTagList: [],
      potBoxDetail: {}
    };
  },
  computed: {
    visible: {
      get() {
        return this.isShowNextBox;
      },
      set(val) {
        this.$emit("update:isShowNextBox", val); // visible 改变的时候通知父组件
      },
    },
  },
  watch: {
    isShowNextBox() {
      if (this.isShowNextBox) {
        this.boxStatusHeader = []
        // 查询窍详情

				// 请求接口 查询窍下面的档案窍

        this.getUserBoxDetail(this.showRow.userBoxSubBean.mainId);
				this.getNextBoxList()
      }
    },
  },
  methods: {
    getUserBoxDetail(userBoxId) {
      new Promise(resolve => {
        getUserBoxDetail(userBoxId)
          .then(res => {
            this.potBoxDetail = res.data


            this.getTaglistByUserBoxId(userBoxId);
          })
          .catch(err => {});
      });
    },
    // 获得 窍标签
    getTaglistByUserBoxId(userBoxId) {
      getTaglistByUserBoxId({ userBoxId: userBoxId }).then(res => {
        this.potBoxTagList = res.data;
      });
    },
    // 
    pageSizeChange(val) {
      this.pageSize = val
      this.getNextBoxList();
    },
    // 分页数据变动
    pageCurrentChange(val) {
      this.pageNum = val
      this.getNextBoxList();
    },
    // 头部筛选项变化
    changeSelect() {
      this.pageNum = 1;
      this.getNextBoxList();
    },
    // 去 窍详情
    goBoxDetail(row) {
      let routeUrl = this.$router.resolve({
        name: "BoxDetail",
        params: { id: row.userBoxId },
      });
      window.open(routeUrl.href, "_blank");
    },
    // 获得当前云窍下档案窍列表
    getNextBoxList() {
      const data = {
				mainBoxCode: this.showRow.userBoxSubBean.mainBoxCode,
        boxStatusList: this.boxStatusHeader,
        startTime:
          this.bindedOnHeader &&
          parseInt(new Date(this.bindedOnHeader[0]).getTime() / 1000),
        endTime:
          this.bindedOnHeader &&
          parseInt(new Date(this.bindedOnHeader[1]).getTime() / 1000),
      };

      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      this.isLoading = true;
      this.userBoxListShow = [];

      new Promise((resolve) => {
        getUserBoxSubList(data, params)
          .then((res) => {
            res.data.map((e) => {
              e.bindedOn = this.$moment(e.bindedOn * 1000).format(
                "YYYY-MM-DD HH:mm:ss"
              );
              e.updatedOn = this.$moment(e.updatedOn * 1000).format(
                "YYYY-MM-DD HH:mm:ss"
              );
            });
            this.userBoxListShow = res.data;
            this.userBoxListShowTotal = res.total;

            if (this.userBoxListShow.length > 0) {
              let ids = [];
              this.userBoxListShow.map((item) => {
                ids.push(item.userBoxId);
              });

              getTaglistByUserBoxIds(ids).then((res) => {
                this.userBoxListShow.map((item) => {
                  res.data.map((tags) => {
                    if (tags.userBoxId == item.userBoxId) {
                      item["boxTagList"] = tags.tagList.filter(m => m.tag != ';' && m.tag != '；');
                      this.$forceUpdate();
                    }
                  });
                });
              });

              // 查窍的最近一次盘点时间
              getBoxLastScanTime(ids).then((res) => {
                this.userBoxListShow.map((item) => {
                  if (res.data[item.userBoxId]) {
                    item["inventoryOn"] = this.$moment(
                      res.data[item.userBoxId] * 1000
                    ).format("YYYY-MM-DD HH:mm:ss");
                  }
                  this.$forceUpdate();
                });
              });
            }

            this.isLoading = false;
          })
          .catch((err) => {
            this.isLoading = false;
          });
      });
    },
    // 关闭 右侧X
    beforeClose() {
      // this.$emit("closeDialog");
      // this.visible = false
    },
  },
};
</script>
<style lang="scss">
.voucher-box {
  height: 800px;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
}




.pot {
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #fafafa;
  .pot-info {
    margin: 0 40px 0 0 ;
  }
	.pot-code {
		padding: 0 0 0 40px;
	}
}
.child-box {
  padding: 0 30px;
  background-color: #fafafa;
	.el-table {
		background-color: #fafafa !important;
		.header-select {
			display: flex;
			justify-content: center;
		}
		.el-button {
			background-color: transparent;
		}
		tr, th {
			background-color: transparent ;
		}

		thead th {
			font-weight: 600;
			font-size: 15px;
		}
	}
}


.table_bot_line {
	height: 80px;
	padding: 0 40px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.header-select {
  // 状态宽度显示
  .multiple-status {
    .el-input__inner {
      width: 8px;
    }
    .el-select__tags {
      display: none;
    }
  }
}
</style>
